<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">选择</div>
    </div>
    <div class="selectNavigation">
      <span class="selectedContent">选项内容</span>
      <span class="selectedContent">选项结果</span>
      <span class="selectedContent">节点类型</span>
    </div>
    <div class="rich_text_container">
      <span style="width: 72px; height: 24px; color: #c4c4c4; padding-top: 12px"
        >选择</span
      >
      <div class="selected_container">
        <div>
          <div v-for="(item, index) in selectGroup" :key="index">
            <div
              class="row-input-container"
              :class="{ selected: index === selectedIndex }"
              @click="selectRow(index)"
            >
              <div class="select-content">
                <el-input v-model="item.selectContent" placeholder="请输入选项内容" />
              </div>
              <div class="select-content">
                <el-input v-model="item.selectResult" placeholder="请输入选项结果" />
              </div>

              <div class="select-content" style="width: 130px;">
                <el-select v-model="item.moduleType"  >
                  <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
              </div>

              <div class="delete-container" @click.stop="deleteItem(index)">
                <img src="/svg/trashCan.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-container">
      <button class="button" @click="handleButton">
        <img src="/svg/plus.svg" style="background-color: #ff8d1a; border-radius: 50%" />
        <span class="button-word">添加新选择</span>
      </button>
    </div>
    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, watch } from "vue";
import { ref } from "vue";

export default defineComponent({
  name: "SelectEditor",
  props: {
    sort:{
      type: Number as PropType<number>,
      default: "0000"
    },
    currentSort:{
      type: String as PropType<string>,
      default: "0000"
    },
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    isChildSelected: {
      type: Number as PropType<number>,
      default: 0
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {
        moduleValue: {
          value: [
            {
              selectContent: "默认选项内容",
              selectResult: "默认选项结果"
            }
          ]
        },
        moduleNext: ""
      }
    }
  },
  
  emits: ["save"], // 定义自定义事件
  setup(props, { emit }) {
    const selectGroup = ref(props.valueFromParent.moduleValue.value || []);
    const selectedIndex = ref<number | null>(0); // 默认选中第一行
    let nextSubSort = ref<number | null>(0);
    const defaultNextId =
    props.id.split("-")[0] + "-" + (Number(props.id.split("-")[1]) + 1);
    const nextStep = ref(
      props.valueFromParent?.moduleNext
        ? props.valueFromParent?.moduleNext
        : defaultNextId
    );

    // 选项数据
    const options = [
      { value: '文本', label: '文本' },
      { value: '图片', label: '图片' },
      { value: '视频', label: '视频' },
      { value: '音频', label: '音频' },
      { value: '章节', label: '章节' },
      { value: '选择', label: '选择' },
      { value: '结局', label: '结局' },
      { value: '奖励', label: '奖励' },
      { value: '对话', label: '对话' },
      { value: '答题', label: '答题' },
    ];

    const selectedValue = ref(''); 

    const createNewItem = () => {
      nextSubSort.value = nextSubSort.value + 1;
      let showId =  props.currentSort  + nextSubSort.value
      const newItem = {
        id: 0,
        selectContent: "指向->"+props.sort + '-' + showId,
        selectResult:   props.sort + '-' + showId,
        moduleType:'文本'
      };
      return newItem;
    };

    const handleButton = () => {
      const newItem = createNewItem();
      if (selectGroup.value) {
        newItem.id = selectGroup.value.length + 1;
        selectGroup.value.push(newItem);
      }
    };

    const handleSave = () => {
      props.valueFromParent.moduleValue.value = selectGroup.value;
      nextStep.value = selectGroup.value[selectedIndex.value].selectResult;
      props.valueFromParent.moduleNext = nextStep.value;
      props.valueFromParent.selectIndex = selectedIndex.value;
      const updatedContent = { ...props.valueFromParent };
      emit("save", updatedContent); // 触发save事件并传递
    };

    const deleteItem = index => {
      selectGroup.value.splice(index, 1);
      selectGroup.value.forEach((item, idx) => {
        item.id = idx - 1; // 假设你需要重新设置 id
      });
    };

    const selectRow = index => {
      selectedIndex.value = index;
    };

    onMounted(() => {
      selectedIndex.value = props.isChildSelected;
    });
    watch(
      () => props.valueFromParent,
      newVal => {
        selectGroup.value = newVal.moduleValue.value;
        nextStep.value = newVal?.moduleNext;
        if (selectedIndex.value === null && selectGroup.value.length > 0) {
          selectedIndex.value = 0; // 默认选中第一行
        }
      },
      { deep: true }
    );

    watch(
      () => props.isChildSelected,
      newVal => {
        selectedIndex.value = newVal;
      }
    );

    return {
      nextStep,
      handleSave,
      selectGroup,
      createNewItem,
      handleButton,
      deleteItem,
      selectRow,
      selectedIndex,
      selectedValue,
      options
    };
  }
});
</script>

<style scoped>
.next_step {
  padding-left: 66.5px;
}
.button-container {
  padding-left: 198px;
  padding-bottom: 17px;
  margin-top: 10px;
  .button {
    left: 3713px;
    top: 2928.38px;
    width: 544px;
    height: 50px;
    opacity: 1;
    border-radius: 10px;
    background: #404040;
    box-shadow: 0px 2px 4px #000000;
    .button-word {
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.27px;
      color: rgba(255, 141, 26, 1);
      text-align: center;
      vertical-align: top;
    }
  }
}

.row-input-container {
  display: flex;
  margin-left: 30px;
}

.el-input{
  width: 100px;
  margin: auto 10px;
}

.row-input-container.selected .select-content .el-input,
.row-input-container.selected .select-result .el-input {
  border: 1px solid #ff8d1a; /* 加粗的绿色边框 */
  border-radius: 5px; /* 可选：圆角 */
  box-shadow: 0 0 5px #ff8d1a; /* 可选：添加阴影效果 */
  
}

.row-input-container /deep/ .el-input {
  width: 150px;
}

.delete-container {
  width: 50px;
}

.selectNavigation {
  padding-left: 200px;
  .selectedContent {
    opacity: 1;
    /** 文本1 */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 21.22px;
    color: rgba(229, 229, 229, 1);
    text-align: center;
    vertical-align: top;
    width: 170px;
    display: inline-block;
   
  }
}

.selected_container {
  left: 200px;
  top: 115px;
  width: 644px;
  height: 50px;
  opacity: 1;
  border-radius: 10px;
  margin-left: 50px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 300px;
  margin-left: 66.5px;
  margin-top: 10px;
  overflow: auto;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 644.7px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}

button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}
</style>
